<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>族谱网 - 首页</title>
<link href="assets/assets/css/gloab.css" rel="stylesheet">
<link href=" assets/assets/css/index.css" rel="stylesheet">

    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery/jquery2.2.4.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link href="assets/fs002/fs_0.2.css" rel="stylesheet">
    <link href="assets/fitness/all_fit.css" rel="stylesheet">
    <link href="assets/fitness/index_fit.css" rel="stylesheet">



<script src="assets/assets/js/register.js"></script>

    <style>
        #verify {
            height: 34px;
            vertical-align: top;
            font-size: 16px;
        }

        #code_img {
            width: 100px;
            height: 36px;
            cursor: pointer;
            vertical-align: top;
            margin-left: 3px;
        }
    </style>
</head>
<body>
<div class="container-fluid zp-topper">
    <div class="row">
        <div class="container">
            <img src="assets/img/logo.png">
            <span style="color:darkgoldenrod;">登录  &nbsp; 查询族谱</span>
        </div>
    </div>
</div>


<div class="navbar navbar-default">
    <div class="container">
        <a class="navbar-brand" href="#"></a>
        <div class="collapse navbar-collapse" id="topbar">
            <ul class="nav navbar-nav">
                <li class=""><a href="index.html">首页</a></li>
                <li class=""><a href="list.html">百家姓</a></li>
                <li class=""><a href="lyan.html">留言板</a></li>
                <!-- <li class=""><a>搜索查询</a></li> -->
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class=""><a href="sign.html">登陆族谱</a></li>
            </ul>
        </div>
    </div>
</div>


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-warning" style="padding-bottom: 30px;min-height: 720px;">
                <div class="panel-heading">注册界面</div>
                <div class="panel-body" style="padding-left: 0px;">
                    <div class="row">
                        <div class="col-md-3"></div>
                        <div class="col-md-6">
                            <div class="box box-success">
                                <div class="box-header with-border">
                                    <h3 class="box-title text-center">注册用户</h3>
                                </div>
                                <!-- /.box-header -->
                                <!-- form start -->
                                <form class="form-horizontal" action="user.html" method="post">
                                    <input type="hidden" name="__token__" value="aae7a63f973a99f34a30ad41b6a16d05">          <div class="" style="width: 100%;text-align: center;padding-top: 20px;">
                                    <img src="assets/img/login.jpg" style="max-width: 500px;">
                                </div>

                                    <hr>
                                   


 
   
            
            <div class="reg-box" id="verifyCheck" style="margin-top:20px;margin-left: -160px;">
                <div class="part1">                 
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>用户名：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="20" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:3-20||isUname" data-error="用户名不能为空||用户名长度3-20位||只能输入中文、字母、数字、下划线，且以中文或字母开头" id="adminNo" />                            <span class="ie8 icon-close close hide"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus"><span>3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
                   
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="password" id="password" maxlength="20" class="txt03 f-r3 required" tabindex="3" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合" /> 
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="password"></span>                        
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">6-20位英文（区分大小写）、数字、字符的组合</label>
                            <label class="focus valid"></label>
                            <span class="clearfix"></span>
                            <label class="strength">
                                <span class="f-fl f-size12">安全程度：</span>
                                <b><i>弱</i><i>中</i><i>强</i></b>
                            </label>    
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="password" maxlength="20" class="txt03 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword" />
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="rePassword"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请再输入一遍上面的密码</label> 
                            <label class="focus valid"></label>                          
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="4" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" id="randCode" data-valid="isNonEmpty" data-error="验证码不能为空" /> 
                                <canvas width="100" height="40" id="verifyCanvas"></canvas>
                   
  <img id="code_img"> 
                         
                          

                            </label>          


                            <label class="icon-sucessfill blank hide" style="left:380px"></label>
                           
                            <label class="focus valid" style="left:283px"></label>                        
                        </div>
                    </div>
                   
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">注册</a>                         
                        </div>
                    </div> 
                </div>
              
      
          
         
              
            </div>
        </div>






                                </form>
                            </div>


                        </div>
                        <div class="col-md-3"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container-fluid" style="background: #fff;padding-top: 10px;">
    <div class="container">
        <div id="footer" style="margin-bottom:20px;">
            <ul id="copyright" style="margin-left:0px;line-height:130%;">

            <div style="width:300px;margin:0 auto; padding:20px 0;">
                <a target="_blank" # style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤公网安备 43018102000107号</p></a>
            </div>
        </div>
    </div>
</div>



<script>
$(function(){   
    //第一页的确定按钮
    $("#btn_part1").click(function(){                       
        if(!verifyCheck._click()) return;
        $(".part1").hide();
        $(".part2").show();
        $(".step li").eq(1).addClass("on");
    });
    //第二页的确定按钮
    $("#btn_part2").click(function(){           
        if(!verifyCheck._click()) return;
        $(".part2").hide();
        $(".part3").show(); 
    }); 
    //第三页的确定按钮
    $("#btn_part3").click(function(){           
        if(!verifyCheck._click()) return;
        $(".part3").hide();
        $(".part4").show();
        $(".step li").eq(2).addClass("on");
        countdown({
            maxTime:10,
            ing:function(c){
                $("#times").text(c);
            },
            after:function(){
                window.location.href="my.html";     
            }
        });     
    }); 
});
function showoutc(){$(".m-sPopBg,.m-sPopCon").show();}
function closeClause(){
    $(".m-sPopBg,.m-sPopCon").hide();       
}
</script>




<script>
    var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
        'y', 'z'];

    drawCode();
    // 绘制验证码
    function drawCode() {
        var canvas = document.getElementById("verifyCanvas");  //获取HTML端画布
        var context = canvas.getContext("2d");                 //获取画布2D上下文
        context.fillStyle = "cornflowerblue";                  //画布填充色
        context.fillRect(0, 0, canvas.width, canvas.height);   //清空画布
        context.fillStyle = "white";                           //设置字体颜色
        context.font = "25px Arial";                           //设置字体
        var rand = new Array();
        var x = new Array();
        var y = new Array();
        for (var i = 0; i < 5; i++) {
            rand[i] = nums[Math.floor(Math.random() * nums.length)]
            x[i] = i * 16 + 10;
            y[i] = Math.random() * 20 + 20;
            context.fillText(rand[i], x[i], y[i]);
        }
        //画3条随机线
        for (var i = 0; i < 3; i++) {
            drawline(canvas, context);
        }

        // 画30个随机点
        for (var i = 0; i < 30; i++) {
            drawDot(canvas, context);
        }
        convertCanvasToImage(canvas)
    }

    // 随机线
    function drawline(canvas, context) {
        context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
        context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
        context.lineWidth = 0.5;                                                  //随机线宽
        context.strokeStyle = 'rgba(50,50,50,0.3)';                               //随机线描边属性
        context.stroke();                                                         //描边，即起点描到终点
    }
    // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
    function drawDot(canvas, context) {
        var px = Math.floor(Math.random() * canvas.width);
        var py = Math.floor(Math.random() * canvas.height);
        context.moveTo(px, py);
        context.lineTo(px + 1, py + 1);
        context.lineWidth = 0.2;
        context.stroke();

    }
    // 绘制图片
    function convertCanvasToImage(canvas) {
        document.getElementById("verifyCanvas").style.display = "none";
        var image = document.getElementById("code_img");
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    // 点击图片刷新
    document.getElementById('code_img').onclick = function () {
        $('#verifyCanvas').remove();
        $('#randCode').after('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
        drawCode();
    }
</script>
</body>
</html>